<template>
  <div class="dmc-login-wrap">
    <el-dialog v-model="showDialog" size="tiny"
               :lock-scroll="false"
               :modal="showMask"
               :close-on-click-modal="false"
               :show-close="false"
               :close-on-press-escape="false" :custom-class="customClass">
      <!--短信 + 验证码登录-->
      <div class="ms-login" v-if="loginType===1">
        <div class="login-type">
          <img :src="loginTypeImg" @click="changeLoginType()"/>
        </div>
        <div>
          <el-form :model="loginModel" ref="loginModel" label-width="0" @keyup.native.enter="login">
            <el-form-item label="">
              <el-input placeholder="请填写登录手机号" v-model="loginModel.phone" :maxlength="11">
                <template slot="prepend"><i class="admin-icon" v-html="'&#xe60d;'"></i></template>
              </el-input>
            </el-form-item>
            <el-form-item label="">
              <el-input placeholder="请填写收到的验证码" v-model="loginModel.smsCode" :maxlength="6">
                <template slot="prepend"><i class="admin-icon" v-html="'&#xe61b;'"></i></template>
                <div slot="append" :class="disabledSend||stop?'btn-send-code send-disabled':'btn-send-code send-active'"
                     @click="disabledSend||stop?'':sendCode()">
                  <span>{{smsCodeText}}</span>
                </div>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="btn-login" type="primary" :disabled="disabledLogin" @click.native="login()">
                <span>登 录</span>
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    props: {
      showMask: {
        type: Boolean,
        default: true
      }
    },
    data: function () {
      return {
        uid: null,
        loginModel: {
          phone: '17714331167',
          smsCode: '123456'
        },
        showDialog: true,
        closeModel: false,
        smsCodeText: '发送验证码',
        stop: false,
        smsCodeInterval: null,
        imgCodeText: '',
        loginType: 1,
        countDown: 60
      }
    },
    created () {
    },
    mounted () {
      this.$nextTick(() => {
      })
    },
    computed: {
      customClass () {
        return !this.showMask ? 'dialog-login top' : 'dialog-login'
      },
      // 发送短信按钮置灰
      disabledSend () {
        if (!this.loginModel.phone) {
          return true
        }
        return false
      },
      // 登录按钮置灰
      disabledLogin () {
        if (!this.loginModel.phone) {
          return true
        } else if (!this.loginModel.smsCode) {
          return true
        }
        return false
      },
      loginTypeImg () {
        return this.loginType === 1 ? require('../assets/images/pc.png') : require('../assets/images/ewm.png')
      }
    },
    methods: {
      // 发送验证码
      sendCode () {
        if (this.loginModel.phone.length !== 11) {
          this.$message.error('请填写11位正确的手机号码！')
          return false
        }
        // 成功提示
        this.$message.success('短信发送成功，请注意查收！')
        // 倒计时开始
        this.startTime()
      },
      // 倒计时
      startTime () {
        if (!this.stop) {
          this.stop = true
          this.smsCodeInterval = setInterval(() => {
            if (this.countDown <= 1) {
              this.stop = false
              this.countDown = 60
              this.smsCodeText = '发送验证码'
              clearInterval(this.smsCodeInterval)
              this.smsCodeInterval = null
            } else {
              this.smsCodeText = this.countDown + ' 秒后重试'
              this.countDown--
            }
          }, 1000)
        }
      },
      // 登录
      login () {
        if (!this.loginModel.phone.length) {
          this.$message.error('请填写登录账号！')
          return false
        }
        if (this.loginModel.phone.length !== 11) {
          this.$message.error('请填写11位正确的手机号码！')
          return false
        }
        if (!this.loginModel.smsCode) {
          this.$message.error('请填写短信验证码！')
          return false
        }
        this.$store.dispatch('Login').then(() => {
          this.$router.push({path: '/index'})
        })
      },
      // 切换登录方式
      changeLoginType () {
        if (this.loginType === 1) {
          this.$notify.info({
            title: '消息',
            message: '暂不支持二维码登录'
          })
        }
      }
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
  @import "../assets/styles/components/iLogin";
</style>
